let { $, table, layer, form, upload } = layui;
import Seat from './seat.js'
export default class Add {
    constructor() {
        this.render();
        this.handle();
    }
    render() {
        let str = ` <script type="text/html" id="adduers">
        <form  class="layui-form" style="width:400px" action="#" lay-filter="student">
            <!-- 影院名 -->
            <div class="layui-form-item">
                <label class="layui-form-label">院线名称</label>
                <div class="layui-input-block">
                    <input id="addname" type="text" name="name" style="width: 200px;" required lay-verify="username" placeholder="请输入院线名称"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 地址 -->
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input id="addage" type="text" name="addr" style="width: 200px;" required lay-verify="pass" placeholder="请输入院线地址"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 热线 -->
            <div class="layui-form-item">
                <label class="layui-form-label">官网电话</label>
                <div class="layui-input-block">
                    <input type="text" name="tel" style="width: 200px;" required lay-verify="pass" placeholder="请输入官网电话"
                    autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 官网 -->
            <div class="layui-form-item">
                <label class="layui-form-label">官网</label>
                <div class="layui-input-block">
                    <input type="text" name="url" style="width: 200px;" required lay-verify="pass" placeholder="请输入官网地址"
                    autocomplete="off" class="layui-input">
                </div>
            </div>
            <div id="addCinemas" class="layui-btn layui-btn-normal">添加放映厅</div>
            <div id ="addDiv" style="max-height: 250px; overflow:auto"></div>
        </form>
        </script>`;
        $("#addStudentTemplate").html(str);
    };
    handle() {
        let index = 0;
        layer.open({
            type: 1,
            btn: ["确定", "取消"],
            title: "添加院线信息",
            success: function () {
                $("#addCinemas").on("click", function () {
                    let screenStr = `
                    <div id="screenDiv${index}" style="border:1px dashed;margin:10px;padding:10px">
                        <div class="layui-form-item">
                        <label class="layui-form-label">放映厅名</label>
                        <div class="layui-input-block">
                            <input
                            type="text"
                            id="screenName${index}"
                            required
                            lay-verify="required"
                            placeholder="请输入放映厅名"
                            autocomplete="off"
                            class="layui-input"
                            />
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">座位排列</label>
                        <div class="layui-input-block">
                            <input
                            type="text"
                            id="seat${index}"
                            required
                            lay-verify="required"
                            placeholder="请输入排列"
                            autocomplete="off"
                            class="layui-input"
                            />
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <div class="layui-input-inline">
                        <button type="button" data-index="${index}" class="layui-btn layui-btn-warm layui-btn-radius show-seat-btn">查看</button>
                        <button type="button" data-index="${index}" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn">删除</button>
                        </div>
                        </div>
                    </div>
                    `;
                    $("#addDiv").append(screenStr);
                    index++;
                    $("#addDiv").on("click", ".show-seat-btn", function () {
                        let index = $(this).attr("data-index");
                        // console.log("查看", index);
                        new Seat($("#seat" + index).val());
                    });
                    $("#addDiv").on("click", ".del-seat-btn", function () {
                        // console.log("删除");
                        let index = $(this).attr("data-index");
                        $("#screenDiv" + index).remove();
                    });
                });
                form.render();
            },
            content: $("#adduers").html(),
            yes: function () {
                let screens = [];
                for (let i = 0; i < index; i++) {
                    console.log("循环", "i:", i, "index:", index);
                    if ($("#screenDiv" + i).length > 0) {
                        screens.push({
                            name: $("#screenName" + i).val(),
                            seat: $("#seat" + i).val()
                        });
                    }
                }
                $.ajax({
                    type: "post",
                    url: "/cinemas",
                    data: { ...form.val("student"), screens: JSON.stringify(screens) },
                    success: function (res) {
                        if (res.data) {
                            layer.msg("添加成功");
                            layer.closeAll();
                            table.reload("studentsTable", { where: "" });
                        }
                    }
                })
            }
        });


    };
}